<template>
  <wd-overlay :show="userStore.showModal" :duration="500" :zIndex="999">
    <view class="login-wrapper">
      <view class="login-model" @click.stop="">
        <div class="logo">logo</div>
        <div class="title">微信信息授权</div>

        <div class="tips">
          <div>民宿小程序申请获得以下权限</div>
          <div>申请获取您的微信信息</div>
        </div>

        <div class="login-btn active" @click="login()">授权登录</div>
        <div class="login-btn loginout active" @click="closeModal()">暂不登录</div>

        <div class="agreement">
          <wd-checkbox
            custom-class="login-custom-checkbox"
            v-model="agreement"
            checked-color="#1F2026"
          >
            已阅读并同意
          </wd-checkbox>
          <span class="active" @click="toAgreement('user_service')">《用户服务协议》</span>
          <span class="active" @click="toAgreement('user_privacy')">《用户隐私协议》</span>
        </div>
      </view>
    </view>
  </wd-overlay>
</template>
<script lang="ts" setup>
import { msgNone } from '@/utils/index'
import { useUserStore } from '@/store/index'

defineOptions({ name: 'LoginModal' })

const userStore = useUserStore()
const agreement = ref(false)

function login() {
  if (agreement.value) {
    wx.login({
      success: (res) => {
        http
          .post(`/blade-auth/wx/login`, {
            jsCode: res.code,
            // jsCode: '66Test',
            appId: import.meta.env.VITE_WX_APPID,
          })
          .then((res: any) => {
            userStore.setToken(res.access_token)
            userStore.getUserInfo().then(() => {
              closeModal()
            })
          })
      },
    })

    // http
    //   .post(`/blade-auth/wx/login`, {
    //     jsCode: res.code,
    //     // jsCode: '66Test',
    //     appId: import.meta.env.VITE_WX_APPID,
    //   })
    //   .then((res: any) => {
    //     userStore.setToken(res.access_token)
    //     userStore.getUserInfo().then(() => {
    //       closeModal()
    //     })
    //   })

    closeModal()

    setTimeout(() => {
      agreement.value = false
    }, 500)
  } else {
    msgNone('请先阅读并勾选协议')
  }
}

function closeModal() {
  userStore.setShowModal(false)
}

function toAgreement(type) {
  uni.navigateTo({
    url: `/pages-sub/system/agreement?type=${type}`,
  })
}
</script>
<style lang="scss" scoped>
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .login-model {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 654rpx;
    height: 580rpx;
    padding: 0 60rpx;
    background: #ffffff;
    border-radius: 30rpx;
    box-shadow: 0px 3.85px 34.62px rgba(#000000, 0.1);

    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100rpx;
      height: 100rpx;
      margin-top: -50rpx;
      color: #fff;
      background: #6155cc;
      border-radius: 23rpx;
    }
    .title {
      margin-top: 18rpx;
      font-size: 30rpx;
      color: var(--color1);
    }
    .tips {
      margin-top: 30rpx;
      font-size: 27rpx;
      line-height: 38rpx;
      color: var(--color3);
      text-align: center;
    }

    .login-btn {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 538rpx;
      height: 80rpx;
      margin-top: 60rpx;
      font-size: 32rpx;
      color: #fff;
      background: var(--color1);
      border-radius: 40rpx;
      box-shadow: 0px 17rpx 28rpx rgba(#1f2026, 0.3);
      &.loginout {
        margin-top: 26rpx;
        color: var(--color2);
        background: #fff;
        border: 1px solid #dcdee0;
        box-shadow: none;
      }
    }

    .agreement {
      display: flex;
      align-items: center;
      margin-top: 28rpx;
      font-size: 20rpx;
      color: var(--color1);
      --wot-checkbox-label-fs: 20rpx;
      --wot-checkbox-label-margin: 6rpx;
      --wot-checkbox-label-color: var(--color1);
      span {
        color: #337cee;
      }
    }
  }
}
</style>
